<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
 


 
 


 <title>UsingBinder - js-binding - Google Code - Using Binder</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 <link type="text/css" rel="stylesheet" href="binder.help_files/d_20080901.css">
 
 
 
<!--[if IE]>
 <link type="text/css" rel="stylesheet" href="/hosting/css/d_ie.css" />
<![endif]-->
</head><body class="t6">
 <div id="gaia">
  <font size="-1">
 
 <a href="http://code.google.com/p/support/wiki/WhatsNew" style="color: rgb(170, 0, 51);">What's new?</a>
 | <a href="http://code.google.com/p/support/">Help</a>
 | <a href="http://code.google.com/more/">Directory</a>
 | <a href="http://www.google.com/accounts/Login?continue=http%3A%2F%2Fcode.google.com%2Fp%2Fjs-binding%2Fwiki%2FUsingBinder&amp;followup=http%3A%2F%2Fcode.google.com%2Fp%2Fjs-binding%2Fwiki%2FUsingBinder">Sign in</a>
 
 </font> 

 </div>
 <table style="margin: 0px 0px -6px 0pt; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0">
 <tbody><tr>
 <td style="width: 153px;"><a href="http://code.google.com/"><img src="binder.help_files/code_sm.png" alt="Google" width="153" height="55"></a></td>
 <td style="padding-left: 1.5em;">
 
 <div id="pname">
 <a href="http://code.google.com/p/js-binding/" style="text-decoration: none; color: rgb(0, 0, 0);">js-binding</a>
 </div>
 <div id="psum">
 <i><a href="http://code.google.com/p/js-binding/" style="text-decoration: none; color: rgb(0, 0, 0);">Simple javascript library for data binding</a></i>
 </div>
 
 </td>
 <td style="white-space: nowrap; text-align: right;">
 
 <form action="/hosting/search">
 <input size="30" name="q" value="">
 <input name="projectsearch" value="Search Projects" type="submit">
 <input name="websearch" value="Search the Web" type="submit">
 </form>
 
 </td></tr>
 </tbody></table>


<table id="mt" border="0" cellpadding="0" cellspacing="0" width="100%">
 <tbody><tr>
 <th onclick="if (!cancelBubble) _go('/p/js-binding/');">
 <div class="tab inactive">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <a onclick="cancelBubble=true;" href="http://code.google.com/p/js-binding/">Project&nbsp;Home</a>
 </div>
 </div>
 </th><td>&nbsp;&nbsp;</td>
 
 
 
 
 <th onclick="if (!cancelBubble) _go('/p/js-binding/downloads/list');">
 <div class="tab inactive">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <a onclick="cancelBubble=true;" href="http://code.google.com/p/js-binding/downloads/list">Downloads</a>
 </div>
 </div>
 </th><td>&nbsp;&nbsp;</td>
 
 
 
 
 
 <th onclick="if (!cancelBubble) _go('/p/js-binding/w/list');">
 <div class="tab active">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <a onclick="cancelBubble=true;" href="http://code.google.com/p/js-binding/w/list">Wiki</a>
 </div>
 </div>
 </th><td>&nbsp;&nbsp;</td>
 
 
 
 
 
 <th onclick="if (!cancelBubble) _go('/p/js-binding/issues/list');">
 <div class="tab inactive">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <a onclick="cancelBubble=true;" href="http://code.google.com/p/js-binding/issues/list">Issues</a>
 </div>
 </div>
 </th><td>&nbsp;&nbsp;</td>
 
 
 
 
 
 <th onclick="if (!cancelBubble) _go('/p/js-binding/source/checkout');">
 <div class="tab inactive">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <a onclick="cancelBubble=true;" href="http://code.google.com/p/js-binding/source/checkout">Source</a>
 </div>
 </div>
 </th><td>&nbsp;&nbsp;</td>
 
 
 <td width="100%">&nbsp;</td>
 </tr>
</tbody></table>
<table class="st" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
 <tbody><tr>
 
 
 
 <td>
 <div class="issueDetail">
<div class="isf">
 
 <span class="inIssueList"> 
 <span>Search</span>
 <form action="/p/js-binding/w/list" method="get" style="display: inline;">
 <select id="can" name="can" style="font-size: 92%;">
 <option disabled="disabled">Search Within:</option>
 
 <option value="1">&nbsp;All Wiki Pages</option>
 <option value="3">&nbsp;Featured Pages</option>
 <option value="2" selected="selected">&nbsp;Current Pages</option>
 
 
 <option value="4">&nbsp;Deprecated Pages</option>
  
 </select>
 <span>for</span>
 <input size="32" id="q" name="q" value="" style="font-size: 92%;" type="text">
 
 
 <input value="Search" style="font-size: 92%;" type="submit">
 </form>
 </span>

 
 
 
 
 
 
 

</div>
</div>

 </td>
 
 
 
 
 
 
 <td class="bevel-right" align="right" valign="top" height="4">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 </td>
 </tr>
</tbody></table>

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
 var cancelBubble = false;
 function _go(url) { document.location = url; }
</script>

<div id="maincol">
<!-- IE -->
<table style="margin-bottom: 6px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td class="notice">
<div class="rounded_ul"><div class="rounded_ur"><div class="rounded_ll"><div class="rounded_lr">


 

</div></div></div></div>
</td></tr>
</tbody></table>




 <style>
 .artifactcomment, #commentform {
 margin: .5em 0 0 0;
 padding: .3em 0 .3em .3em;
 border-top: 3px solid #c3d9ff;
 }
 #commentform { padding-top: 1em; }
 .delcom { background: #e8e8e8 }
 .commentcontent { margin: 1em 0;}
 </style>


 
 <div style="float: right; width: 18em;" id="wikimeta">
 <div class="pmeta_bubble_bg"><div class="rounded_ul"><div class="rounded_ur"><div class="rounded_ll"><div class="rounded_lr">
 <table style="padding: 5px;">
 <tbody><tr><td colspan="2" style="padding-bottom: 5px;">Updated <span title="Tue Aug 12 09:02:51 2008">Aug 12, 2008</span>
 
 by <a href="http://code.google.com/u/sqrrrl/">sqrrrl</a>
 </td></tr>
 
 
 
 </tbody></table>
 </div></div></div></div></div>
 </div>
 
 <div id="wikiheader" style="margin-bottom: 1em;">
 
 <span style="font-size: 120%; font-weight: bold;">UsingBinder</span>
 &nbsp;
 
 
 <div style="font-style: italic; margin-top: 3px;">Using Binder</div>
 
 </div>
 <div id="wikicontent">
 <h1><a id="Introduction">Introduction</a></h1><p><a id="Introduction">This is a short tutorial on how to use the various classes. </a></p><h1><a id="Creating_a_Property_Accessor">Creating a Property Accessor</a></h1><p><a id="Creating_a_Property_Accessor">For this and the remaining examples, let's build up a new object from scratch using <strong>Binder.PropertyAccessor</strong>. </a></p><pre class="prettyprint"><a id="Creating_a_Property_Accessor"><span class="kwd">var</span><span class="pln"> myObject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{};</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> accessor </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Binder</span><span class="pun">.</span><span class="typ">PropertyAccessor</span><span class="pun">(</span><span class="pln"> myObject </span><span class="pun">);</span></a></pre><h1><a id="Setting_properties">Setting properties</a></h1><p><a id="Setting_properties">You may set any property in the object graph via the <strong>set()</strong>
method. The notation is a simple dotted-path notation, similar to many
web frameworks. It also matches the same path that you would use if
accessing the property directly in javascript. The difference, and the
value that PropertyAccessor adds, is that it will transparently create
all the objects necessary to reach that path if they don't already
exist. Continuing from the previous example, where we've created an
accessor for an empty object, let's set some properties: </a></p><pre class="prettyprint"><a id="Setting_properties"><span class="pln">accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"username"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"jdoe"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"email"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"foo@bar.com"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"address.street"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"123 Market St"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"address.city"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"San Francisco"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"address.state"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"California"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"phone[0].type"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"home"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"phone[0].number"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"555-1212"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"phone[1].type"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"mobile"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"phone[1].number"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"555-7878"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br><br></span><span class="kwd">var</span><span class="pln"> result </span><span class="pun">=</span><span class="pln"> accessor</span><span class="pun">.</span><span class="pln">target</span><span class="pun">;</span></a></pre><p><a id="Setting_properties">Our resulting object would then look like: </a></p><pre class="prettyprint"><a id="Setting_properties"><span class="pun">{</span><span class="pln"> <br>&nbsp; username</span><span class="pun">:</span><span class="pln"> </span><span class="str">"jdoe"</span><span class="pun">,</span><span class="pln"><br>&nbsp; email</span><span class="pun">:</span><span class="pln"> </span><span class="str">"foo@bar.com"</span><span class="pun">,</span><span class="pln"><br>&nbsp; address</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; street</span><span class="pun">:</span><span class="pln"> </span><span class="str">"123 Market St"</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; city</span><span class="pun">:</span><span class="pln"> </span><span class="str">"San Francisco"</span><span class="pun">,</span><span class="pln"> <br>&nbsp; &nbsp; state</span><span class="pun">:</span><span class="pln"> </span><span class="str">"California"</span><span class="pln"><br>&nbsp; </span><span class="pun">},</span><span class="pln"><br>&nbsp; phone</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"home"</span><span class="pun">,</span><span class="pln"> number</span><span class="pun">:</span><span class="pln"> </span><span class="str">"555-1212"</span><span class="pln"> </span><span class="pun">},</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">{</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"mobile"</span><span class="pun">,</span><span class="pln"> number</span><span class="pun">:</span><span class="pln"> </span><span class="str">"555-7878"</span><span class="pln"> </span><span class="pun">}</span><span class="pln"><br>&nbsp; </span><span class="pun">]</span><span class="pln"><br></span><span class="pun">}</span></a></pre><h1><a id="Getting_properties">Getting properties</a></h1><p><a id="Getting_properties">You may also read property values using the same notation using the <strong>get()</strong> method.  Attempts to access invalid paths will not modify the bound object and will simply return <strong>undefined</strong>. </a></p><h1><a id="Addtional_notes_on_Arrays">Addtional notes on Arrays</a></h1><p><a id="Addtional_notes_on_Arrays">In
addition to accessing individual array elements, it is also possible to
access the array itself by omitting the index. This provides a little
more flexibility. particularly in form binding where we the array size
is variable depending on the items selected. For example: </a></p><pre class="prettyprint"><a id="Addtional_notes_on_Arrays"><span class="pln">accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"options[]"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"option1"</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>accessor</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="str">"options[]"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"option2"</span><span class="pln"> </span><span class="pun">);</span></a></pre><p><a id="Addtional_notes_on_Arrays">will produce: </a></p><pre class="prettyprint"><a id="Addtional_notes_on_Arrays"><span class="pun">{</span><span class="pln"><br>&nbsp; options</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"option1"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"option2"</span><span class="pln"> </span><span class="pun">]</span><span class="pln"> <br></span><span class="pun">}</span></a></pre><p><a id="Addtional_notes_on_Arrays">Retrieving the attribute using the same notation returns the array itself. </a></p><h1><a id="Binding_to_Forms">Binding to Forms</a></h1><p><a id="Binding_to_Forms">While
setting and getting properties by themselves isn't too useful, it can
be used as the foundation of a simple, declarative form binding
mechanism. Consider: </a></p><pre class="prettyprint"><a id="Binding_to_Forms"><span class="pun">&lt;</span><span class="tag">form</span><span class="pun">&gt;</span><span class="pln"><br>&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"username"</span><span class="pun">/&gt;</span><span class="pln"><br>&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"email"</span><span class="pun">/&gt;</span><span class="pln"><br>&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"address.street"</span><span class="pun">/&gt;</span><span class="pln"><br>&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"address.city"</span><span class="pun">/&gt;</span><span class="pln"><br>&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"address.state"</span><span class="pun">/&gt;</span><span class="pln"><br>&nbsp; ...<br></span><span class="pun">&lt;/</span><span class="tag">form</span><span class="pun">&gt;</span></a></pre><p><a id="Binding_to_Forms">If
your form is AJAX based and leverages JSON or DWR, binder makes it
trivial to convert this form to the corresponding object graph: </a></p><pre class="prettyprint"><a id="Binding_to_Forms"><span class="pun">{</span><span class="pln"><br>&nbsp; username</span><span class="pun">:</span><span class="pln"> </span><span class="str">"..."</span><span class="pun">,</span><span class="pln"><br>&nbsp; email</span><span class="pun">:</span><span class="pln"> </span><span class="str">"..."</span><span class="pun">,</span><span class="pln"><br>&nbsp; address</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; street</span><span class="pun">:</span><span class="pln"> </span><span class="str">"..."</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; city</span><span class="pun">:</span><span class="pln"> </span><span class="str">"..."</span><span class="pun">,</span><span class="pln"><br>&nbsp; &nbsp; state</span><span class="pun">:</span><span class="pln"> </span><span class="str">"..."</span><span class="pln"><br>&nbsp; </span><span class="pun">}</span><span class="pln"><br></span><span class="pun">}</span></a></pre><p><a id="Binding_to_Forms"><strong>Binder.FormBinder</strong> does just this and provides two methods, <strong>serialize()</strong> and <strong>deserialize()</strong>.  For example, to fill in a form from a javascript object, use the code: </a></p><pre class="prettyprint"><a id="Binding_to_Forms"><span class="pln">&nbsp; </span><span class="kwd">var</span><span class="pln"> myObject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">...;</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> myForm </span><span class="pun">=</span><span class="pln"> </span><span class="pun">...;</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> binder </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Binder</span><span class="pun">.</span><span class="typ">FormBinder</span><span class="pun">(</span><span class="pln"> myForm</span><span class="pun">,</span><span class="pln"> myObject </span><span class="pun">);</span><span class="pln"><br>&nbsp; binder</span><span class="pun">.</span><span class="pln">deserialize</span><span class="pun">();</span></a></pre><p><a id="Binding_to_Forms">Likewise, to convert the form input back into the object representation: </a></p><pre class="prettyprint"><a id="Binding_to_Forms"><span class="pln">&nbsp; myObject </span><span class="pun">=</span><span class="pln"> binder</span><span class="pun">.</span><span class="pln">serialize</span><span class="pun">();</span></a></pre><h1><a id="Type_Conversion">Type Conversion</a></h1><p><a id="Type_Conversion">By
default, form fields are serialized as strings. The form binder
supports type hints specified in the element's class. The binder will
look for classes in the form <i>type[n]</i> where <i>n</i> is the
identifier of the type handler, and will attempt to parse or format
values appropriately. If no handler for the type is found no conversion
is performed. For example, we can use the built-in number converter in
a text field as: </a></p><pre class="prettyprint"><a id="Type_Conversion"><span class="pln">&nbsp; </span><span class="pun">&lt;</span><span class="tag">input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"age"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"type[number]"</span><span class="pun">/&gt;</span></a></pre><p><a id="Type_Conversion">Built-in handlers include: </a></p><ul><li><a id="Type_Conversion">string
- Default handler. Empty strings are treated as undefined values are
are not set as properties. You may define your own handler if you need
to propagate empty strings. </a></li><li><a id="Type_Conversion">number - Basic formatting/parsing of numbers. </a></li><li><a id="Type_Conversion">boolean - Basic formatting/parsing of booleans, true&lt;-&gt;"true", false&lt;-&gt;"false" </a></li></ul><h1><a id="Custom_Type_Handlers">Custom Type Handlers</a></h1><p><a id="Custom_Type_Handlers">For
custom types, you can specify additional handlers by adding properties
to Binder.TypeRegistry. For example, adding a custom date type: </a></p><pre class="prettyprint"><a id="Custom_Type_Handlers"><span class="pln">&nbsp; </span><span class="typ">Binder</span><span class="pun">.</span><span class="typ">TypeRegistry</span><span class="pun">[</span><span class="str">'date'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="com">// Date handler using datejs much improved parsing...</span><span class="pln"><br>&nbsp; &nbsp; parse</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> value </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln"> value </span><span class="pun">);</span><span class="pln"> </span><span class="pun">},</span><span class="pln"><br>&nbsp; &nbsp; format</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> value </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="kwd">toString</span><span class="pun">(</span><span class="pln"> </span><span class="str">'M/d/yyyy'</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"><br>&nbsp; </span><span class="pun">};</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> binder </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Binder</span><span class="pun">.</span><span class="typ">FormBinder</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> myForm</span><span class="pun">,</span><span class="pln"> myObject </span><span class="pun">);</span><span class="pln"> <br>&nbsp; binder</span><span class="pun">.</span><span class="pln">deserialize</span><span class="pun">();</span></a></pre><p><a id="Custom_Type_Handlers">This handler would be used for any element with a class of <i>type[date]</i>. </a></p><p><a id="Custom_Type_Handlers">For additional examples, refer to the unit tests in SVN. </a></p>
<a id="Custom_Type_Handlers"> </a></div>


<a id="Custom_Type_Handlers"> 
 <br>
 </a><div id="commentlist">
<a id="Custom_Type_Handlers"> 


 
 
 
 
</a><div class="collapse">


<a id="Custom_Type_Handlers"> 

</a></div>

<a id="Custom_Type_Handlers"> <script type="text/javascript">
 function delComment(sequence_num, delete_mode) {
 var f = document.forms["delcom"];
 f.sequence_num.value = sequence_num;
 f.mode.value = delete_mode;
 f.submit();
 return false;
 }
 </script>


 </a></div>
<a id="Custom_Type_Handlers"> 
 
 
 
 <br>
 </a><div class="artifactcomment">
<a id="Custom_Type_Handlers"> <img src="binder.help_files/triangle.gif"></a><a href="http://www.google.com/accounts/Login?continue=http%3A%2F%2Fcode.google.com%2Fp%2Fjs-binding%2Fwiki%2FUsingBinder&amp;followup=http%3A%2F%2Fcode.google.com%2Fp%2Fjs-binding%2Fwiki%2FUsingBinder">Sign in</a> to add a comment
 </div>
 
 

<form name="delcom" action="../w/delComment.do" method="post">
 <input name="sequence_num" value="" type="hidden">
 <input name="mode" value="" type="hidden">
 <input name="pagename" value="UsingBinder" type="hidden">
 <input name="token" value="" type="hidden">
</form>


<script src="binder.help_files/prettify_20080714.js"></script>
<script>
 prettyPrint();
</script>
<script type="text/javascript" src="binder.help_files/dit_scripts_20080804.js"></script>



  
 
 
 </div>
<div id="footer" dir="ltr">
 
 <div class="text">
 
 ©2008 Google -
 <a href="http://code.google.com/">Code Home</a> -
 <a href="http://code.google.com/tos.html">Terms of Service</a> -
 <a href="http://www.google.com/privacy.html">Privacy Policy</a> -
 <a href="http://code.google.com/more/">Site Directory</a>
 
 </div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="binder.help_files/ga.js" type="text/javascript"></script>
<script>
var siteTracker = _gat._getTracker("UA-18071-1");
siteTracker._initData();
siteTracker._trackPageview();

</script>

 
 


 <script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

</body></html>